<template>
  <div class="container">
    <div class="ad1 rea">
      <div class="text">教练宝典APP</div>
      <img :src="pic2" alt="" class="code" />
      <div class="pic1">
        <img :src="imgs[0]" alt="" />
      </div>
    </div>
    <div class="ad2 rea">
      <div class="text">驾考宝典APP</div>
      <img :src="pic2" alt="" class="code" />
      <div class="pic2">
        <img :src="imgs[1]" alt="" />
      </div>
    </div>
    <div class="ad3 rea">
      <div class="text">买车宝典APP</div>
      <img :src="pic2" alt="" class="code" />
      <div class="pic3">
        <img :src="imgs[2]" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import pic2 from "../assets/pic2.png";

const imgs = [
  "https://picsum.photos/id/7/300/500",
  "https://picsum.photos/id/8/430/540",
  "https://picsum.photos/id/9/265/428",
];
</script>

<style scoped>
.container {
  background-color: rgb(232, 232, 232);
  height: 560px;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 100px;
  overflow: hidden;
}

.rea {
  position: relative;
}

.code {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text {
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 22px;
}

.ad1 {
  margin-top: 180px;
}
.ad1:hover,
.ad2:hover,
.ad3:hover {
  transform: translateY(-70px);
  transition: transform 1s;
}

.pic1:hover,
.pic2:hover,
.pic3:hover {
  background-color: aliceblue;
  opacity: 0.5;
}

.ad2 {
  margin-top: 100px;
}
.ad3 {
  margin-top: 200px;
}
</style>
